<template>
  <view class="container">
    <view class="header">
      <view class="avatar">
        <image :src="CardInfo.card_logo" />
      </view>
      <view class="name">
        {{ CardInfo.card_nickname }}
      </view>
      <view class="job">
        {{ CardInfo.card_job }}
      </view>
      <view class="company">
        {{ CardInfo.card_compony }}
      </view>
    </view>

    <view class="menu">
      <!-- 除了H5其他都显示 -->
      <!-- #ifndef H5-->
      <view class="item">
        <uv-button
          type="default"
          :plain="true"
          text="同步通讯录"
          :custom-style="syncBtn"
          @click="OnAddContact"
        ></uv-button>
      </view>

      <view class="item">
        <uv-button
          type="default"
          :plain="true"
          text="分享名片"
          :custom-style="relayBtn"
          open-type="share"
        ></uv-button>
      </view>
      <!-- #endif -->
    </view>

    <view class="info">
      <view class="title">信息</view>

      <view class="list">
        <view class="item">
          <view class="content">
            <view class="name">手机</view>
            <view class="value">{{ CardInfo.card_mobile }}</view>
          </view>
          <view class="icon">
            <image src="/static/images/tel.png" />
          </view>
        </view>

        <view class="item">
          <view class="content">
            <view class="name">邮箱</view>
            <view class="value">{{ CardInfo.card_email }}</view>
          </view>
          <view class="icon">
            <image src="/static/images/email.png" />
          </view>
        </view>

        <view class="item">
          <view class="content">
            <view class="name">地址</view>
            <view class="value">{{ CardInfo.card_address }}</view>
          </view>
          <view class="icon">
            <image src="/static/images/site.png" />
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 消息提示 -->
  <uv-toast ref="NoticeRef"></uv-toast>
</template>

<script setup>
// 同步通讯录的样式
const syncBtn = ref({
  color: "red",
  background: "transparent",
  width: "100%",
  border: "1px solid red",
  fontSize: "14px",
});
// 分享的样式
const relayBtn = ref({
  color: "red",
  background: "transparent",
  width: "100%",
  border: "1px solid red",
  fontSize: "14px",
});
// 名片详情数据
const CardInfo = ref({});
// 消息提示
const NoticeRef = ref(null);
// 页面加载
onLoad(() => {
  GetCardInfoData();
});

// 获取名片数据
const GetCardInfoData = async () => {
  // 发起请求
  const result = await uni.$uv.http.post("/index/index");
  // 处理请求结果
  if (result.code == 1) {
    CardInfo.value = result.data;
  }
};

// 添加通讯录
// https://uniapp.dcloud.net.cn/api/system/contact.html
const OnAddContact = () => {
  uni.addPhoneContact({
    photoFilePath: CardInfo.value.card_logo, // 头像本地文件路径
    nickName: CardInfo.value.card_nickname, // 昵称
    firstName: CardInfo.value.card_nickname, // 名字
    organization: CardInfo.value.card_company, // 公司
    title: CardInfo.value.card_job, // 职位
    mobilePhoneNumber: CardInfo.value.card_mobile, // 手机号
    weChatNumber: CardInfo.value.card_mobile, // 微信号
    email: CardInfo.value.card_email, // 电子邮件
    workAddressStreet: CardInfo.value.card_address, // 工作地址街道
    success: () => {
      NoticeRef.value.show({
        type: "success",
        message: "保存通讯录成功",
      });
    },
    fail: (error) => {
      NoticeRef.value.show({
        type: "error",
        message: `保存通讯录失败:${error.errMsg}`,
      });
    },
  });
};

// 分享名片
// https://uniapp.dcloud.net.cn/api/plugins/share.html
onShareAppMessage(() => {
  return {
    title: `${CardInfo.value.card_company}的名片`,
    path: "/pages/card/card",
    imageUrl: CardInfo.value.card_logo,
  };
});
</script>

<style>
page {
  background-color: #eee;
}

.header {
  width: 95%;
  background-color: #fff;
  margin: 0 auto;
  border-radius: 10px;
  margin-top: 10px;
  padding: 20px 0;
  text-align: center;
  box-shadow: 0px 0px 10px 5px #dcdcdc;
}

.header .avatar {
  width: 80px;
  height: 80px;
  overflow: hidden;
  border-radius: 50%;
  margin: 0 auto;
}

.header .avatar image {
  width: 100%;
  height: 100%;
}

.header .name {
  margin-top: 12px;
  font-weight: bold;
  font-size: 18px;
}

.header .job {
  font-size: 12px;
  color: #949bae;
  margin: 10px 0;
}

.header .company {
  font-size: 12px;
  color: #949bae;
}

.header .list {
  display: flex;
  justify-content: space-between;
  margin-top: 20px;
}

.header .list .item {
  display: flex;
  flex-direction: column;
  width: 33%;
  justify-content: center;
}

.header .list .item image {
  width: 25px;
  height: 25px;
  margin: 0 auto;
}

.header .list .item text {
  font-size: 12px;
  color: #949bae;
  margin-top: 10px;
}

.menu {
  width: 95%;
  margin: 20px auto 0;
  display: flex;
  justify-content: space-around;
}

.menu .item {
  width: 47%;
}

.info {
  width: 95%;
  margin: 20px auto 0;
  background-color: #fff;
  box-shadow: 0px 0px 10px 5px #dcdcdc;
  padding: 10px;
  box-sizing: border-box;
  border-radius: 10px;
}

.info .list {
  margin-top: 10px;
}

.info .list .item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 5px 0;
  color: #949bae;
}

.info .list .item .content {
  display: flex;
  font-size: 12px;
}

.info .list .item .name {
  display: flex;
  align-items: center;
}

.info .list .item .name::after {
  content: "";
  width: 1px;
  height: 10px;
  background-color: #949bae;
  display: block;
  margin: 0 5px;
}

.info .list .item .icon {
  width: 15px;
  height: 15px;
}

.info .item .icon image {
  width: 100%;
  height: 100%;
}
</style>